<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('选择用户')"/>
    <th:block th:include="include :: okr-css" />
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 组织机构
            </div>
            <div class="box-tools pull-right">
                <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理部门"><i
                        class="fa fa-edit"></i></a>
                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
                        class="fa fa-chevron-up"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
                        class="fa fa-chevron-down"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i
                        class="fa fa-refresh"></i></button>
            </div>
        </div>
        <div class="ui-layout-content">
            <div id="tree" class="ztree"></div>
        </div>
    </div>
</div>

<div class="ui-layout-center">
    <div class="wrapper animated fadeInRight select-okr-users">
        <div class="row select-search"  >
            <div class="col-sm-12">
                <div class="ibox search-box"  >
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <form id="user-form">
                                    <input type="hidden" id="deptId" name="deptId">
                                    <input type="hidden" id="parentId" name="parentId">
                                    <input type="hidden" id="okrIds" name="okrIds" th:value="${okrIds}">
                                    <div class="select-list">
                                        <ul>
                                            <li>
                                                用户名称：<input type="text" name="loginName"/>
                                            </li>
                                            <li>
                                                手机号码：<input type="text" name="phonenumber"/>
                                            </li>
                                            <li>
                                                <a class="btn btn-primary btn-rounded btn-sm"
                                                   onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                                <a class="btn btn-warning btn-rounded btn-sm"
                                                   onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                            </li>
                                        </ul>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row select-list">
            <div class="col-sm-5"  >
                <div class="ibox select-box">
                    <div class="ibox-title">
                        <h5>选择用户</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12 select-table table-striped"  >
                                <table id="bootstrap-table"  ></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pull-left kr-key-p0" >
                <div class="ibox operation-box">
                    <div class="ibox-title">
                        <h5>操作选项</h5>
                    </div>
                    <div class="ibox-content form-horizontal" >
                        <div class="btn-group-sm" role="group"  style="margin-bottom: 30px;">
                            <a class="btn btn-danger btn-circle btn-lg"  style="padding: 13px 16px; " type="button" onclick="removeRow()"  ><i class="fa fa-arrow-left"></i>
                            </a>
                        </div>
                        <div class="btn-group-sm" role="group">
                            <a class="btn btn-primary btn-circle btn-lg"  style="padding: 13px 16px; " type="button" onclick="appendUsers()"  ><i class="fa fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5" >
                <div class="ibox  result-box">
                    <div class="ibox-title">
                        <h5>已选中</h5>
                    </div>
                    <div class="ibox-content" >
                        <div class="row">
                            <div class="col-sm-12 select-table table-striped"    >
                                <table id="select-bootstrap-table" ></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:user:remove')}]];
    var resetPwdFlag = [[${@permission.hasPermi('system:user:resetPwd')}]];
    var prefix = ctx + "system/user";

    $(function () {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});
        queryUserList();
        queryDeptTree();
        querySelectUserList();
    });

    //初始化查询清单
    function queryUserList() {
        var options = {
            id: "bootstrap-table",
            url: prefix + "/selectList",
            pagination:false,
            modalName: "用户",
            clickToSelect: true,
            rememberSelected: true,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            toolbar: "toolbar1",
            uniqueId: "userId",
            columns: [{
                checkbox: true
            },
                {
                    field: 'userId',
                    visible:false,
                    title: '用户ID'
                },
                {
                    field: 'loginName',
                    title: '登录名称',
                    visible:false,
                    sortable: true
                },
                {
                    field: 'userName',
                    title: '用户名称'
                },
                {
                    field: 'dept.deptName',
                    title: '部门'
                }]
        };
        $.table.init(options);
    }

    // 初始化选中列表
    function querySelectUserList() {
        var options = {
            id: "select-bootstrap-table",
            // url: prefix + "/selectList",
            pagination:false,
            modalName: "用户",
            clickToSelect: true,
            rememberSelected: true,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            uniqueId: "userId",
            columns: [{
                checkbox: true
            },
                {
                    field: 'userId',
                    visible:false,
                    title: '用户ID'
                },
                {
                    field: 'loginName',
                    title: '登录名称',
                    visible:false,
                    sortable: true
                },
                {
                    field: 'userName',
                    title: '用户名称'
                },
                {
                    field: 'dept.deptName',
                    title: '部门'
                }]
        };
        $.table.init(options);
    }

    let selectMap = new Map();  //选中数据的map对象-- 将作为最终提交数据
    /* 新增表格行 */
    function appendUsers() {
        $.modal.loading("请稍后...");
        var rows = $.table.selectRowData();

        if (rows.length > 0) {
            for (var i = 0; i < rows.length; i++) {
                var key = rows[i].userId;
                if (!selectMap.has(key)) {
                    selectMap.set(key, rows[i]);
                    $("#select-bootstrap-table").bootstrapTable('insertRow', {
                        index: 0, // 你想插入到哪，0表示第一行
                        row: rows[i]
                    });
                }
            }
        }
        $.modal.closeLoading();
        $.table.refresh("bootstrap-table");
    }


    /* 删除指定表格行 */
    function removeRow() {
        $.modal.loading("请稍后...");
        var rows = $("#select-bootstrap-table").bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            $.modal.closeLoading();
            return;
        }
        var idsArr = new Array();
        for (var i = 0; i < rows.length; i++) {
            var key = rows[i].userId;
            idsArr.push(key);
            //数组移除
            selectMap.delete(key);
        }
        $("#select-bootstrap-table").bootstrapTable('remove', {
            field: 'userId',
            values: idsArr
        })
        $.modal.closeLoading();
    }

    /* 添加用户-选择用户-提交 */
    function submitHandler() {

        var idsArr = new Array();
        for (let item of selectMap.keys()) {
            idsArr.push(item);
        }
        if(idsArr.length>0)
        {
            $.modal.loading("正在校验数据，请稍后...");
            $.modal.confirm("批量协同将会覆盖单独协同的数据，你确定执行吗?", function () {
                var data = {"okrIds": $("#okrIds").val(), "userIds": idsArr.join(",")};
                $.operate.save("/okr/info/batchCollaboration", data, function (e) {
                    $.modal.closeLoading();
                    if (e.code == 0) {
                        $.modal.alertSuccess(e.msg);
                    } else {
                        $.modal.alertError(e.msg);
                    }
                });
            });
        }
        else {
            $.modal.alertError("请至少选择一条数据，亲！");
        }

    }


    function queryDeptTree() {
        var url = ctx + "system/dept/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#deptId").val(treeNode.id);
            $("#parentId").val(treeNode.pId);
            $.table.search();
        }
    }

    $('#btnExpand').click(function () {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function () {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function () {
        queryDeptTree();
    });

    /* 用户管理-部门 */
    function dept() {
        var url = ctx + "system/dept";
        $.modal.openTab("部门管理", url);
    }

    /* 用户管理-重置密码 */
    function resetPwd(userId) {
        var url = prefix + '/resetPwd/' + userId;
        $.modal.open("重置密码", url, '800', '300');
    }

    /* 用户管理-分配角色 */
    function authRole(userId) {
        var url = prefix + '/authRole/' + userId;
        $.modal.openTab("用户分配角色", url);
    }

    /* 用户状态显示 */
    function statusTools(row) {
        if (row.status == 1) {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.userId + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.userId + '\')"></i> ';
        }
    }

    /* 用户管理-停用 */
    function disable(userId) {
        $.modal.confirm("确认要停用用户吗？", function () {
            $.operate.post(prefix + "/changeStatus", {"userId": userId, "status": 1});
        })
    }

    /* 用户管理启用 */
    function enable(userId) {
        $.modal.confirm("确认要启用用户吗？", function () {
            $.operate.post(prefix + "/changeStatus", {"userId": userId, "status": 0});
        })
    }
</script>
</body>

</html>